<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .inner_c {
            width: 1000px;
            margin: 0px auto;
        }

        .header {
            height: 58px;
            background-color: #191D3A;
        }

        .header .inner_c .logo {
            float: left;
            width: 170px;
            height: 58px;
            background: url("images/logo.png") no-repeat;
        }

        .header .inner_c .nav {
            float: left;
            height: 58px;
            width: 608px;
            margin-left: 30px;
        }

        .header .inner_c .nav ul .nav_last {
            border-right: 1px coral solid;
        }

        .header .inner_c .nav ul li {
            float: left;
            width: 100px;
            line-height: 58px;
            text-decoration: none;
            border-left: 1px coral solid;
        }

        .header .inner_c .nav ul li a {
            float: left;
            color: white;
            text-align: center;
            text-decoration: none;
            height: 58px;
            width: 100px;
        }

        .header .inner_c .nav ul a:hover {
            background: lime;
            color: red;
        }

        .jrwm {
            float: left;
            background: lime;
            border: 1px solid red;
            border-radius: 6px;
            margin-left: 20px;
            position: relative;
            left: 0px;
            top: 12px;
        }

        .jrwm a {
            display: block;
            width: 102px;
            height: 34px;
            text-align: center;
            text-decoration: none;
            line-height: 34px;

        }

        .jrwm a:hover {
            background: lime;
            color: red;
        }

        .banner {
            background: url("images/banner.jpg") no-repeat;
            height: 465px;
            position: relative;
        }

        .banner .banner_circle {
            height: 24px;
            width: 132px;
            color: white;
            text-align: center;
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -66px;
        }

        .banner .banner_circle ul li {
            float: left;
            width: 12px;
            height: 12px;
            cursor: pointer;
            background: red;
            margin-left: 10px;
            border: 1px solid blue;
            font-size: 4px;
            line-height: 12px;
            position: relative;
            border-radius: 10px;
            left: 0px;
            top: 5px;
        }

        .banner .banner_circle ul .current {
            background: black;
        }

        .product {
            height: 260px;
            padding-top: 50px;
            border-bottom: 1px solid gray;
            position: relative;
        }

        .product li {
            width: 218px;
            margin-left: 42px;
            float: left;
        }

        .product .current {
            margin-left: 0px;
        }

        .product img {
            width: 218px;
            height: 128px;
        }

        .product h3 {
            text-align: center;
            margin-top: 10px;
        }

        .product span {
            color: #38B774;
            font-size: 14px;
            display: block;
            text-align: center;
            margin-top: 10px;
            background: url("images/sanjiaoxing.png") no-repeat 140px 6px;
            position: relative;

        }

        .product .pro_clear {
            clear: both;
        }

        .product .product_circle {
            width: 132px;
            height: 24px;
            background: white;
            position: absolute;
            margin-left: -66px;
            left: 50%;
            bottom: -18px;
        }

        .product .product_circle ul li {
            width: 12px;
            height: 12px;
            margin-left: 15px;
            background: url("images/dian1.png") no-repeat;
            cursor: pointer;
            line-height: 12px;
        }

        .product .product_circle ul .current {
            background: url("images/dian2.png") no-repeat;
        }

        .newsandzhaoping {
            height: 420px;
            padding-top: 40px;
            background: url("images/indexmainbg.jpg") no-repeat left bottom;
            position: relative;
        }

        .newsandzhaoping .more {
            position: absolute;
            left: 220px;
            top: 40px;
        }

        .newsandzhaoping .news a {
            display: block;
            width: 70px;
            height: 34px;
            background: url("images/more.png") no-repeat;
        }

        .newsandzhaoping .news a:hover {
            background: url("images/more2.png") no-repeat;
        }

        .newsandzhaoping .news {
            width: 500px;
            height: 420px;
            float: left;
            background: url("images/bynewsbg.jpg") no-repeat;
            position: relative;
        }

        .newsandzhaoping .news ul {
            margin-top: 120px;
            padding-left: 20px;
        }

        .newsandzhaoping .news .date {
            color: gray;
        }

        .newsandzhaoping .news .title {
            margin-left: 20px;
            color: black;
        }

        .newsandzhaoping .news ul li {
            width: 450px;
            height: 52px;
            line-height: 52px;
            border-bottom: 1px gray solid;
        }

        .newsandzhaoping .jobs {
            float: left;
            width: 500px;
            height: 420px;
            background: url("images/byhrbg3.jpg") no-repeat;
        }

        .newsandzhaoping .jobs .php {
            color: white;
            margin-top: 110px;
            padding-left: 20px;
        }

        .newsandzhaoping .jobs .php h4 {
            display: block;
            width: 300px;

        }

        .newsandzhaoping .jobs .php ul li {
            width: 300px;
            height: 40px;
            line-height: 40px;
            color: white;
            border-bottom: 1px solid gray;
        }

        .footer {
            height: 90px;
            background-color: green;
        }

    </style>
</head>
<body>
<!--头部-->
<div class="header">
    <!--版心-->
    <div class="inner_c">
        <div class="logo">
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a href="">首页</a>
                </li>
                <li>
                    <a href="">博雅游戏</a>
                </li>
                <li>
                    <a href="">博雅新闻</a>
                </li>
                <li>
                    <a href="">关于我们</a>
                </li>
                <li>
                    <a href="">客服中心</a>
                </li>
                <li class="nav_last">
                    <a href="">投资者关系</a>
                </li>
            </ul>

        </div>
        <div class="jrwm">
            <a href="">加入我们</a>
        </div>
    </div>
</div>

<!--轮播广告图-->
<div class="banner">
    <div class="banner_circle">
        <ul>
            <li class="current">
                1
            </li>
            <li>
                2
            </li>
            <li>
                3
            </li>
            <li>
                4
            </li>
            <li>
                5
            </li>
        </ul>
    </div>
</div>

<!--产品部分-->
<div class="product inner_c">
    <ul>
        <li class="current">
            <img src="images/gamepic1.jpg" alt="">
            <h3>BPT宣传片</h3>
            <span>点击播放</span>
        </li>
        <li>
            <img src="images/gamepic3.jpg" alt="">
            <h3>BPT宣传片</h3>
            <span>点击播放</span>
        </li>
        <li>
            <img src="images/video.jpg" alt="">
            <h3>BPT宣传片</h3>
            <span>点击播放</span>
        </li>
        <li>
            <img src="images/video.jpg" alt="">
            <h3>BPT宣传片</h3>
            <span>点击播放</span>
        </li>
    </ul>
    <div class="pro_clear">

    </div>
    <div class="product_circle">
        <ul>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>


<!--新闻招聘部分-->
<div class="newsandzhaoping">
    <div class="inner_c">

        <div class="news">
            <ul>
                <li>
                    <span class="date">
                        09/28
                    </span>
                    <span class="title">2015博雅国际博客大赛（BPT）在澳门落幕</span>
                </li>
                <li>
                      <span class="date">
                        09/28
                    </span>
                    <span class="title">2015博雅国际博客大赛（BPT）在澳门落幕</span>
                </li>
                <li>
                      <span class="date">
                        09/28
                    </span>
                    <span class="title">2015博雅国际博客大赛（BPT）在澳门落幕</span>
                </li>
                <li>
                      <span class="date">
                        09/28
                    </span>
                    <span class="title">2015博雅国际博客大赛（BPT）在澳门落幕</span>
                </li>
            </ul>
            <div class="more">
                <a href=""></a>
            </div>

        </div>
        <div class="jobs">
            <div class="php">
                <h4>专场招聘岗位:</h4>
                <ul>
                    <li>PHP开发工程师</li>
                    <li>PHP开发工程师</li>
                    <li>PHP开发工程师</li>
                    <li>PHP开发工程师</li>
                </ul>
            </div>
        </div>
    </div>

</div>
<!--底部部分-->
<div class="footer">


</div>

</body>
</html>